<template>
	<view class="">
		<view class="bile_screen">
			<view class="bile_screen_t">
				<view class="bile_screen_all flexo" @click="allflag = !allflag">
					<span>全部</span>
					<i class="icon" v-if="!allflag">&#xe649;</i>
					<i class="icon" v-else>&#xe64a;</i>
				</view>
				<view class="bile_screen_time flexo" @click="timeflag = !timeflag">
					<span>时间</span>
					<i class="icon" v-if="!timeflag">&#xe649;</i>
					<i class="icon" v-else>&#xe64a;</i>
				</view>
			</view>
			<view class="bile_screen_b" v-if="allflag">
				<view :class="['bile_screen_b_nav',order_index==index?'bile_screen_b_nav_index':'']"
				v-for="(item,index) in ordernav"
				@click="change(index)"
				:key="index">
					{{item}}
				</view>
			</view>
		</view>
		<!-- 订单列表 -->
			<view class="bilelist" v-for="(item,index) in orderlist" :key="index">
				<view class="bilelist_t">
					<view class="bilelist_ordernum bilelist_wz">
						订单编号：{{item.ordernum}}
					</view>
					<view class="bilelist_form bilelist_wz">
						{{item.form}}
					</view>
				</view>
				<view class="bilelist_b">
					<view class="bilelist_b_o">
						<view class="bilelist_wz">
							{{item.title}}
						</view>
						<view class="bilelist_money">
							{{item.money}}
						</view>
					</view>
					<view class="bilelist_b_t">
						<view class="user">
							<span>{{item.user}}</span><span>{{item.mobile}}</span>
						</view>
						<view class="group">
							亲子组
						</view>
					</view>
					<view class="bilelist_b_th">
						<view class="time">
							<span>{{item.date}}</span>
							<span>{{item.time}}</span>
						</view>
						<view class="look" @click="todetails">
							查看详情
						</view>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 全部flag
				allflag:false,
				// 时间flag
				timeflag:false,
				order_index:0,
				ordernav:['全部订单','付款订单','退款订单'],
				orderlist:[
					{ordernum:'64984643131',form:'活动报名',title:'附加服务',
						user:'撒谎',mobile:'12313214312',money:'42',
						date:'2019-15-12',time:'16:23:12'
					},
					{ordernum:'64984643131',form:'活动报名',title:'附加服务',
						user:'撒谎',mobile:'12313214312',money:'42',
						date:'2019-15-12',time:'16:23:12'
					},
					{ordernum:'64984643131',form:'活动报名',title:'附加服务',
						user:'撒谎',mobile:'12313214312',money:'42',
						date:'2019-15-12',time:'16:23:12'
					}
				]
			}
		},
		methods: {
			change(key) {
				this.order_index = key
			},
			todetails() {
				uni.navigateTo({
					url:'/pageC/mine/biledetails'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	@import url("../../static/less/mine/bile.less");
</style>
